<div>
	<table class="layui-hide" id="tblCustomer" lay-filter="tblCustomer"></table>
</div>
<script type="text/html" id="barCustomer">
  <a class="layui-btn " lay-event="add">新增</a>
  <a class="layui-btn layui-btn-warm" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger " lay-event="del">删除</a>
  <a class="layui-btn" lay-event="contact">查看联系人</a>
  <a class="layui-btn " lay-event="record">查看交往记录</a>
  <div class="" style="float:right;width: 40%;">
  <input type="text" id="txtCusName" 
  style="
  display: inline ; 
  height:38px; 
  width: 55%; 
  font-size: 14px;" placeholder="请输入客户名称查询" >
  <a class="layui-btn " id="btnSearch" lay-event="search"
  style="
  height: 38px; 
  line-height: 38px; 
  padding: 0 18px; 
  font-size:14px">按客户名称名称查询</a>
  </div>
</script>

<script>
	var row = null
	var table
	layui.use('table', function(){
		table = layui.table;
		var $ = layui.jquery;
		
		table.render({
			elem:'#tblCustomer', //指定渲染的table标签id名
			url:'http://localhost:8080/customer/getCustomerList', //获取数据url地址
			cols:[[
				{checkbox:true},
				{field:'cusNo', width:110, title:'客户编号', sort:true},
				{field:'cusName',width:150,title:'客户名称'}, //{属性名1：属性值1，属性名2：属性值2}
				{field:'cusRegionCN', width:100, title:'所在地',
				templet:function(row){  //客户地区，1：东北，2：西北，3：华北，4：华中，5：华南，6：西南，7：华东
					switch(row.cusRegion){
						case 1:
						return '东北'
						break;
						case 2:
						return '西北'
						break;
						case 3:
						return '华北'
						break;
						case 4:
						return '华中'
						break;
						case 5:
						return '华南'
						break;
						case 6:
						return '西南'
						break;
						case 7:
						return '华东'
						break;
						default:
						return row.cusRegion;
						break;
					}
				}}, //sort属性为当页显示排序，不设width会将剩余宽度分给该字段
				{field:'cusLevel',width:100,title:'客户等级',
				templet:function(row){  //模板属性，用于数据库状态编码的转换
				//客户等级(1-战略合作伙伴、2-合作伙伴、3-大客户、4-重点开发客户、5-普通客户、6-VIP客户)
					switch(row.cusLevel){
						case 1:
						return '战略合作伙伴'
						break;
						case 2:
						return '合作伙伴'
						break;
						case 3:
						return '大客户'
						break;
						case 4:
						return '重点开发客户'
						break;
						case 5:
						return '普通客户'
						break;
						case 6:
						return 'VIP客户'
						break;
						default:
						return row.cusLevel;
						break;
					}
				}},
				{field:'cusCredit',width:100,title:'客户信用度',
				templet:function(row){  //模板属性，用于数据库状态编码的转换
					switch(row.cusCredit){
						case 1:
						return '一级'
						break;
						case 2:
						return '二级'
						break;
						case 3:
						return '三级'
						break;
						case 4:
						return '四级'
						break;
						case 5:
						return '五级'
						break;
						default:
						return row.cusCredit;
						break;
					}
				}},
				{field:'cusSatisfaction',width:100,title:'客户满意度',
				templet:function(row){  //模板属性，用于数据库状态编码的转换
					switch(row.cusSatisfaction){
						case 1:
						return '一级'
						break;
						case 2:
						return '二级'
						break;
						case 3:
						return '三级'
						break;
						case 4:
						return '四级'
						break;
						case 5:
						return '五级'
						break;
						default:
						return row.cusSatisfaction;
						break;
					}
				}},
				{field:'cusUrl', title:'网址'},
				{field:'cusState', width:100, title:'客户状态',
				templet:function(row){  //模板属性，用于数据库状态编码的转换
					switch(row.cusState){
						case 1:
						return '正常'
						break;
						case 0:
						return '不正常'
						break;
						default:
						return row.cusState;
						break;
					}
				}},
			]],
			page:true ,//允许显示分页工具栏
			height:'full-160',
			limit:5,
			limits:[5, 10 ,15 ,20 ,25 ,30],
			toolbar:'#barCustomer',//设置表格工具栏
			defaultToolbar:[] //设置是否有默认工具栏
		});
		
		table.on('toolbar(tblCustomer)', function(obj){
		  var checkStatus = table.checkStatus(obj.config.id);
		  
		    //obj.event对应工具栏按钮的lay-event属性
		    switch(obj.event){
		    case 'add':
			    layer.open({
			          type: 2 //此处以iframe举例
			          ,title: '新增客户信息'
			          ,area: ['400px', '490px']
			          ,shade: 0.3 //弹出窗口灯箱效果
			          ,maxmin: true //显示最大化/最小化按钮
			          ,offset: [ //弹出窗口居中显示
			            ($(window).height()-490)/2
			            ,($(window).width()-400)/2
			          ] 
			          ,content: 'customer/customeradd.html' //窗口连接
			        });
		    break;
		    case 'del':
		      if(checkStatus.data.length<=0){ //判断选中数组的长度，有选中才能修改
		      	layer.msg('请选择要删除的行')
		      }else{
				  layer.confirm('确认删除选中行吗?', function(index){
				    //do something
					var arrId = []
				    for(var i = 0; i<checkStatus.data.length; i++){
						var customer = checkStatus.data[i]
						arrId.push(customer.cusNo)
					}
					$.ajax({
						url:'http://localhost:8080/customer/delCustomer',
						type:'POST',
						datatype:'JSON',
						data:{
							ids:arrId.join(',')
						},
						success:function(obj){
							table.reload('tblCustomer',{
								page:{
									curr:1 //删除后跳转到第一页，避免最后一页全部删除出现空白
								}	
							})
							layer.msg(obj.msg)
						}
					})
				    layer.close(index);
				  });       
		      	}
		    break;
		    case 'edit':
			if(checkStatus.data.length<=0){ //判断选中数组的长度，有选中才能修改
				layer.msg('请选择要修改的行')
			}else{
				row = checkStatus.data[0]
				// debugger
				if(row.cusState == 0){
					layer.msg('该记录状态非正常无法修改')
				}else{
					layer.open({
					      type: 2 //此处以iframe举例
					      ,title: '修改客户信息'
					      ,area: ['400px', '490px']
					      ,shade: 0.3 //弹出窗口灯箱效果
					      ,maxmin: true //显示最大化/最小化按钮
					      ,offset: [ //弹出窗口居中显示
					        ($(window).height()-490)/2
					        ,($(window).width()-400)/2
					      ] 
					      ,content: 'customer/customerupdate.html' //窗口连接
					    });
				}
			}
		    break;
			case 'search':
			// $("#btnSearch").click(function(){  //查询表格信息
				var key = $("#txtCusName").val()
				table.reload('tblCustomer',{  //reload方法重新加载页
					where:{
						cusName:key //查询条件
					},
					page:{
						curr:1 //重新从第一页开始
					}			
				})
			// )
			break;
			case 'contact':
			    if(checkStatus.data.length<=0){
			    	layer.msg('请选择客户查看联系人')
			    }else{
					window.localStorage.cusNo= checkStatus.data[0].cusNo
					$.get("customer/customerContact.html", null, function(content) {
					$(".layui-body").children(0).html(content)
					})
				}
			break;
			case 'record':
			    if(checkStatus.data.length<=0){
			    	layer.msg('请选择客户查看交往记录')
			    }else{
					window.localStorage.cusNo= checkStatus.data[0].cusNo
					$.get("customer/customerRecord.html", null, function(content) {
					$(".layui-body").children(0).html(content)
					})
				}
			break;
		    };
		});	
	});
</script>
